<template>
    <el-menu
        :default-active="activeIndex"
        class="nav"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="1">主页</el-menu-item>
        <el-menu-item index="2">学习笔记</el-menu-item>
        <el-menu-item index="3">生活随笔</el-menu-item>
        <el-menu-item index="4">我的作品</el-menu-item>
    </el-menu>
</template>

<script>
export default {
    name:"Nav",
     data() {
      return {
        activeIndex: '1',
        mainRouters:['/index','/mynote','/myessay','/myworks'],
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        this.$router.push(`${this.mainRouters[Number(key)-1]}`);
      }
    }
}
</script>

<style scoped>
@media only screen and (max-width:414px){
    .el-menu-item{
        font-size: 12px;
    }
}
@media only screen and (max-width:360px){
    .el-menu-item{
        font-size: 12px;
        padding: 0 15px;
    }
}
@media only screen and (max-width:320px){
    .el-menu-item{
        font-size: 12px;
        padding: 0 12px;
    }
}
</style>

